<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <link rel="stylesheet" th:href="@{../bootstrap/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{../css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{../css/main.css}">
    <style>
        .tree li {
            list-style-type: none;
            cursor:pointer;
        }
        table tbody tr:nth-child(odd){background:#F4F4F4;}
        table tbody td:nth-child(even){color: #cc0000;}
        select,option{
            font-size: 20px;
        }
        .text{
            width: 200px;
            line-height: 30px;
            display: inline;
        }
    </style>
</head>

<body>


<div th:replace="../templates/nav"></div>
<div class="container-fluid">
    <div class="row">
        <div th:replace="../templates/menu"></div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title"><i class="glyphicon glyphicon-th"></i> 我的班级</h3>
                </div>
                <div class="panel-body">
                    <form class="form-inline" role="form" style="float:left;" id="searchForm">
                        <div class="form-group has-feedback">
                            班级类型：<select id="cnameSearch" name="cname" class="form-control text" >
                            <option value="" selected>请选择类型</option><option value="开发班">开发班</option><option value="测试班">测试班</option>
                            <option value="前端设计">前端设计</option><option value="UI设计">UI设计</option>
                        </select>
                            开班状态： <select name="cstate" id="cstateSearch" class="form-control">
                            <option value="">全部</option>
                            <option value="未开班">未开班</option>
                            <option value="正常">正常</option>
                            <option value="已结课">已结课</option>
                        </select>
                        </div>
                        <button type="button" class="btn btn-warning" id="btnReset"><i class="glyphicon glyphicon-search"></i> 重置</button>

                        <button type="button" class="btn btn-warning" id="btnSearch"><i class="glyphicon glyphicon-search"></i> 搜索</button>
                    </form>
                    <!--                    <button type="button" class="btn btn-danger" style="float:right;margin-left:10px;" id="btnDelSelected"><i class=" glyphicon glyphicon-remove"></i> 删除</button>-->
                    <br>
                    <hr style="clear:both;">
                    <div class="table-responsive">
                        <form id="delForm">
                            <table class="table  table-bordered ">
                                <thead>
                                <tr>
                                    <th width="50px">编号</th>
                                    <th width="100px">班主任</th>
                                    <th width="100px">教师</th>
                                    <th width="100px">班级名称</th>
                                    <th width="100px">状态</th>
                                    <th width="100px">开课时间</th>
                                    <th width="100px">结课时间</th>
                                </tr>

                                <tbody id="tbody">

                                </tbody>
                                </thead>
                                <tfoot>
                                <tr >
                                    <td colspan="7" align="center">
                                        <ul class="pagination" id="byPage">

                                        </ul>
                                    </td>
                                </tr>
                                </tfoot>
                            </table>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script th:src="@{../jquery/jquery-2.1.1.min.js}"></script>
<script th:src="@{|/jquery/jquery.md5.js|}"></script>
<script th:src="@{../bootstrap/js/bootstrap.min.js}"></script>
<script th:src="@{../script/docs.min.js}"></script>
<script th:src="@{../layer/layer.js}"></script>


<script type="text/javascript">
    $(function () {
        $(".list-group-item").click(function(){
            if ( $(this).find("ul") ) {
                $(this).toggleClass("tree-closed");
                if ( $(this).hasClass("tree-closed") ) {
                    $("ul", this).hide("fast");
                } else {
                    $("ul", this).show("fast");
                }
            }
        });
        showList(1)


    });
    $("#btnSearch").click(
        function (){
            showList(1)
        })
    $("#btnReset").click(
        function (){
            $("#searchForm")[0].reset()
            $("#cnameSearch").val("")
            $("#uidSearch").val("")
            $("#cnameSearch").val("")
            $("#cstateSearch").val("")
            showList(1)
        })
    function showList(currentPage) {
        $.ajax({
            url:"/clazz/tclazzListDo",
            type:"post",
            data:{"currentPage":currentPage,"cname":$("#cnameSearch").val(),"cstate":$("#cstateSearch").val()},
            success:function (data) {

                if (data.result){
                    var str="";
                    $.each(data.tclazzList, function (index,clazz) {
                        str += "<tr>";
                        str += "<td>" + clazz.cid + "</td>";
                        str += "<td>" + clazz.user.uname + "</td>";
                        str += "<td>" + clazz.tname+"</td>";
                        str += "<td>" + clazz.cname + "</td>";
                        str += "<td>" + clazz.cstate + "</td>";
                        str += "<td>" + clazz.begin + "</td>";
                        str += "<td>" + clazz.end + "</td>";
                       str += "</tr>";
                    });
                    $("#tbody").html(str);
                    var pageStr = "";
                    pageStr += '<li class="' + (data.pageBean.currentPage == 1 ? 'disabled' : '') + '"><a href="#" onclick="showList(' + (1) + ')">首页</a></li>';

                    pageStr += '<li class="' + (data.pageBean.currentPage == 1 ? 'disabled' : '') + '"><a href="#" onclick="showList(' + (data.pageBean.currentPage - 1) + ')">上一页</a></li>';
                    for (var i = 1; i <= data.pageBean.countPage; i++) {
                        pageStr += '<li class="' + (data.pageBean.currentPage == i ? 'active' : '') + '"><a href="#" onclick="showList(' + i + ')">' + i + '<span class="sr-only">(current)</span></a></li>';
                    }
                    pageStr += '<li class="' + (data.pageBean.currentPage == data.pageBean.countPage? 'disabled' : '') + '"><a href="#" onclick="showList(' + (data.pageBean.currentPage==data.pageBean.countPage?data.pageBean.currentPage:data.pageBean.currentPage + 1) + ')">下一页</a></li>';
                    pageStr += '<li class="' + (data.pageBean.currentPage == data.pageBean.countPage? 'disabled' : '') + '"><a href="#" onclick="showList(' + (data.pageBean.countPage) + ')">末页</a></li>';

                        $("#byPage").html(pageStr);
                } else {
                    layer.msg("数据加载失败", {time: 1000, icon: 5, shift: 6}, function () {
                    });
                }
            }
        });
    }

</script>
</body>
</html>